<template>
  <div class="page-baseinfo-edit">
    <el-form class="edit-box" label-position="top" :model="detailData" :rules="rules" ref="ruleForm">
      <div class="title">
        基础信息
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="仓库名称">
            <el-input v-model="detailData.storageName" placeholder="请输入仓库名称" maxlength="50" :disabled="disable" readonly></el-input>
          </el-form-item>
          <el-form-item label="仓库地址">
            <el-input v-model="detailData.storageAddress" placeholder="请输入仓库地址" maxlength="50" :disabled="disable"  readonly></el-input>
          </el-form-item>
        </div>
        <div class="edit-row">
          <el-form-item label="联系人姓名" prop="applicantContact">
            <el-input v-model="detailData.applicantContact" placeholder="请输入联系人姓名" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" prop="applicantConTel">
            <el-input v-model="detailData.applicantConTel" placeholder="请输入联系人电话" maxlength="15" @blur="onlyNumber('applicantConTel')"></el-input>
          </el-form-item>
        </div>
        <div class="edit-row">
          <el-form-item label="参考价格(元/m² • 天)">
         <el-input v-model="detailData.referencePrice" placeholder="请输入参考价格" @blur="onlyNumber('referencePrice')" maxlength="10"></el-input>
          </el-form-item>
        </div>
        <div class="edit-upload">
          <el-form-item label="提交仓库图片" >
            <el-upload
              class="upload-demo"
              action="http://upload.malicn.com/uploadFile/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="detailData.fileVos"
              :on-exceed="fileExceed"
              :limit="5"
              accept="image/jpeg,image/gif,image/png,image/bmp"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">（支持jpg、png、gif、bmp格式,最多选5张）</div>
            </el-upload>

            <el-dialog :append-to-body="true" :visible.sync="dialogVisible" title="图片浏览"  >
              <img width="100%" :src="dialogImageUrl"   >
            </el-dialog>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        交通条件
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="交通环境">
            <el-input v-model="detailData.trafficSetting" placeholder="请输入交通环境" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="出入口宽度">
            <el-input v-model="detailData.entranceWidth" placeholder="请输入出入口宽度" @blur="onlyNumber('entranceWidth')" maxlength="50"></el-input>
          </el-form-item>
        </div>
        <div class="edit-row">
          <el-form-item label="主通道宽度" >
            <el-input  placeholder="请输入主通道宽度" maxlength="50" v-model="detailData.mainEntrWidth" @blur="onlyNumber('mainEntrWidth')"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        收费标准
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="装卸费">
            <el-input v-model="detailData.loadingFee" placeholder="请输入装卸费" @blur="onlyNumber('loadingFee')" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="扫码费">
            <el-input v-model="detailData.scanCodeFee" placeholder="请输入扫码费" @blur="onlyNumber('scanCodeFee')" maxlength="10"></el-input>
          </el-form-item>
        </div>
        <div class="edit-row">
          <el-form-item label="分色费" >
            <el-input v-model="detailData.colorSepFee" placeholder="请输入分色费" @blur="onlyNumber('colorSepFee')" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="管理费" >
            <el-input v-model="detailData.manageFee" placeholder="请输入管理费" @blur="onlyNumber('manageFee')" maxlength="10"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        安保条件
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="园区围墙">
            <el-select v-model="detailData.parkWall" placeholder="请选择" >
              <el-option
                v-for="item in parkwallOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出入口门禁">
            <el-select v-model="detailData.isAccessCon" placeholder="请选择">
              <el-option
                v-for="item in isAccessConOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="edit-row">
          <el-form-item label="安保条件(多选)">
            <el-select v-model="detailData.securityTerm" placeholder="请选择" multiple>
              <el-option
                v-for="item in securityermOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        配套条件周边
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="办公场所">
            <el-select v-model="detailData.isWorkspace" placeholder="请选择">
              <el-option
                v-for="item in workspaceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商业区、冻品市场 ">
            <el-select v-model="detailData.isFrozenMarket" placeholder="请选择">
              <el-option
                v-for="item in isFrozenMarketOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        仓库类型
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="建筑类型(多选)">
            <el-select v-model="detailData.edificeType" placeholder="请选择" multiple>
              <el-option
                v-for="item in edificeTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="仓储功能(多选)">
            <el-select v-model="detailData.storageFun" placeholder="请选择" multiple>
              <el-option
                v-for="item in storageFuncOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="edit-row right-con">
          <el-form-item label="仓储温控（最低温度可达）" class="temp">
            <el-input v-model="detailData.storageTemp" placeholder="请输入仓储温控" @blur="onlyTemp" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="制冷方式">
            <el-select v-model="detailData.cryogenMode" placeholder="请选择">
              <el-option
                v-for="item in cryogenModeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="edit-row right-con">
          <el-form-item label="库容（万吨）" class="storage">
            <el-input v-model="detailData.storageCapacity" placeholder="请输入库容" maxlength="10" @blur="onlyNumber('storageCapacity')"></el-input>
          </el-form-item>
          <el-form-item label="建筑面积（㎡）" class="conArea">
            <el-input v-model="detailData.conArea" placeholder="请输入建筑面积" maxlength="10"  @blur="onlyNumber('conArea')"></el-input>
          </el-form-item>
        </div>
        <div class="edit-row">
          <el-form-item label="建筑层数">
            <el-select v-model="detailData.highLevel" placeholder="请选择">
              <el-option
                v-for="item in highLevelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        功能配置
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="仓库净高">
            <el-select v-model="detailData.storageHeight" placeholder="请选择">
              <el-option
                v-for="item in storageHighOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月台">
            <el-select v-model="detailData.platform" placeholder="请选择月台">
              <el-option
                v-for="item in platformOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="edit-row">
          <el-form-item label="装卸场地宽度">
            <el-select v-model="detailData.siteWidth" placeholder="请选择装卸场地宽度">
              <el-option
                v-for="item in siteWidthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="装卸车位">
            <el-select v-model="detailData.parkingSpace" placeholder="请选择装卸车位">
              <el-option
                v-for="item in parkingOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="edit-row">
          <el-form-item label="装卸门及洞口数量">
            <el-select v-model="detailData.holdCount" placeholder="请选择装卸门及洞口数量">
              <el-option
                v-for="item in holeCountOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="叉车充电桩">
            <el-select v-model="detailData.isChargePillar" placeholder="请选择叉车充电桩">
              <el-option
                v-for="item in isChargePillarOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="edit-row right-con">
          <el-form-item label="叉车数量（台）" class="charge">
            <el-input v-model="detailData.chargeCount" placeholder="请输入叉车数量" maxlength="4" @blur="onlyNumber('chargeCount','int')"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        消防系统
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="消防资质备案">
            <el-select v-model="detailData.isFireFiling" placeholder="请选择消防资质备案">
              <el-option
                v-for="item in isFireFilingOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消防系统">
            <el-select v-model="detailData.fireSystem" placeholder="请选择消防系统">
              <el-option
                v-for="item in fireSystemOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        服务
      </div>
      <div class="edit-item">
        <div class="edit-row">
          <el-form-item label="物业管理">
            <el-select v-model="detailData.propertyManage" placeholder="请选择物业管理">
              <el-option
                v-for="item in propertyManageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="edit-box-btn" > <span @click="save('ruleForm')">保存</span></div>
  </div>
</template>
<script>
import maValidate from 'utils/common-method/validate/index';
export default{
  props: ['detailData'],
  data () {
    return {
      dialogImageUrl: '', // 图片预览地址
      dialogVisible: false, // 图片预览显示 隐藏,
      disable: true,
      parkwallOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '封闭式围墙'
        },
        {
          value: 3,
          label: '开放式围墙'
        },
        {
          value: 4,
          label: '无围墙'
        }
      ],
      isAccessConOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '有'
        },
        {
          value: 3,
          label: '无'
        }
      ],
      securityermOptions: [
        {
          value: 1,
          label: '警钟'
        },
        {
          value: 2,
          label: '保安'
        },
        {
          value: 3,
          label: '普通视频监控'
        },
        {
          value: 4,
          label: '无线射频'
        }
      ],
      workspaceOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '有'
        },
        {
          value: 3,
          label: '无'
        }
      ],
      isFrozenMarketOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '有'
        },
        {
          value: 3,
          label: '无'
        }
      ],
      edificeTypeOptions: [
        {
          value: 1,
          label: '立体库'
        },
        {
          value: 2,
          label: '高架库'
        },
        {
          value: 3,
          label: '楼库'
        },
        {
          value: 4,
          label: '平库'
        }
      ],
      storageFuncOptions: [
        {
          value: 1,
          label: '冷藏'
        },
        {
          value: 2,
          label: '冷冻'
        }
      ],
      cryogenModeOptions: [
        {
          value: 1,
          label: '其他'
        },
        {
          value: 2,
          label: '氨冷'
        },
        {
          value: 3,
          label: '氟冷'
        }
      ],
      highLevelOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '一层'
        },
        {
          value: 3,
          label: '二层'
        },
        {
          value: 4,
          label: '三层及以上'
        }
      ],
      storageHighOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '净高<3.6M'
        },
        {
          value: 3,
          label: '3.6M≤净高＜ 4.8M'
        },
        {
          value: 4,
          label: '净高≥4.8M'
        }
      ],
      platformOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '外月台'
        },
        {
          value: 3,
          label: '内月台'
        }
      ],
      siteWidthOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '≤30米'
        },
        {
          value: 3,
          label: '>30米'
        }
      ],
      parkingOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '5个以下'
        },
        {
          value: 3,
          label: '5~15个'
        },
        {
          value: 4,
          label: '15个以上'
        }
      ],
      holeCountOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '15个以下'
        },
        {
          value: 3,
          label: '15个'
        },
        {
          value: 4,
          label: '15个以上'
        }
      ],
      isChargePillarOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '有'
        },
        {
          value: 3,
          label: '无'
        }
      ],
      isFireFilingOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '有'
        },
        {
          value: 3,
          label: '无'
        }
      ],
      fireSystemOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '火灾报警系统(手动报警、声光报警、空气采样、红外对射等)'
        }
      ],
      propertyManageOptions: [
        {
          value: 1,
          label: '未知'
        },
        {
          value: 2,
          label: '有'
        },
        {
          value: 3,
          label: '无'
        }
      ],
      rules: {
        applicantContact: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        applicantConTel: [
          { required: true, validator: maValidate.checkMobileNo, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 图片预览
    handlePreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onlyNumber (type, number) {
      if (number === 'int') {
        if (this.detailData[type] !== '') {
          this.detailData[type] = this.detailData[type].replace(/[^0-9]/g, '');
        } else {
          this.detailData[type] = this.detailData[type].replace(/\D/g, '');
        }
      } else {
        this.detailData[type] = this.detailData[type].match(/\d+(\.\d{0,2})?/) ? this.detailData[type].match(/\d+(\.\d{0,2})?/)[0] : '';
      }
    },
    onlyTemp () {
      if (this.detailData.storageTemp !== '') {
        this.detailData.storageTemp = this.detailData.storageTemp.replace(/[^\-?\d.]/g, '');
      } else {
        this.detailData.storageTemp = this.detailData.storageTemp.replace(/\D/g, '');
      }
    },
    // 删除图片上传回调
    handleRemove(file, fileList) {
      this.detailData.fileVos = fileList;
    },
    closeImgPreview () {
      this.dialogVisible = false;
    },
    // 图片上传成功回调
    handleSuccess (response, file, fileList) {
      let UploadImgObj = {name: '', url: ''};
      UploadImgObj.name = file.name;
      UploadImgObj.url = file.response.data;
      this.detailData.fileVos.push(UploadImgObj);
    },
    // 图片超出张数限制 勾子函数
    fileExceed () {
      this.$notify({
        message: '最多只能上传5张照片',
        duration: 3000,
        type: 'warning'
      });
    },
    // 保存编辑后的资料
    save (formName) {
      if (this.detailData.applicantContact === '') {
        this.$notify({
          message: '联系人姓名为空，请补全',
          type: 'warning'
        });
        return false;
      }
      if (this.detailData.applicantConTel === '') {
        this.$notify({
          message: '联系人电话为空，请补全',
          type: 'warning'
        });
        return false;
      }
      let reg = /^1\d{10}$/;
      if (!reg.test(this.detailData.applicantConTel)) {
        this.$notify({
          message: '联系人电话格式错误',
          type: 'warning'
        });
        return false;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.postData();
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    // 发送保存的数据给后台
    postData() {
      let that = this;
      that.ajax({
        url: '/maliwms/storage/editStorage',
        type: 'POST',
        data: that.handlePostData(this.detailData),
        loading: true,
        success: (res) => {
          setTimeout(() => {
            that.$pcNProgress.done();
          }, 300);
          if (res.code === 200) {
            this.successTip(res.message);
            that.$emit('save-edit');
          } else {
            this.errorTip(res.message);
          }
        }
      });
    },
    // 处理提交的数据给后台
    handlePostData() {
      let postData = {};
      postData.applicantConTel = this.detailData.applicantConTel;
      postData.applicantContact = this.detailData.applicantContact;
      postData.chargeCount = this.detailData.chargeCount;
      postData.colorSepFee = this.detailData.colorSepFee;
      postData.colorSepFee = this.detailData.colorSepFee;
      postData.conArea = this.detailData.conArea;
      postData.cryogenMode = this.detailData.cryogenMode;
      postData.edificeType = this.detailData.edificeType;
      postData.entranceWidth = this.detailData.entranceWidth;
      postData.fireSystem = this.detailData.fireSystem;
      postData.highLevel = this.detailData.highLevel;
      postData.holdCount = this.detailData.holdCount;
      postData.id = this.detailData.id;
      postData.isAccessCon = this.detailData.isAccessCon;
      postData.isChargePillar = this.detailData.isChargePillar;
      postData.isFireFiling = this.detailData.isFireFiling;
      postData.isFrozenMarket = this.detailData.isFrozenMarket;
      postData.isWorkspace = this.detailData.isWorkspace;
      postData.loadingFee = this.detailData.loadingFee;
      postData.mainEntrWidth = this.detailData.mainEntrWidth;
      postData.manageFee = this.detailData.manageFee;
      postData.parkWall = this.detailData.parkWall;
      postData.parkingSpace = this.detailData.parkingSpace;
      postData.platform = this.detailData.platform;
      postData.propertyManage = this.detailData.propertyManage;
      postData.referencePrice = this.detailData.referencePrice;
      postData.scanCodeFee = this.detailData.scanCodeFee;
      postData.securityTerm = this.detailData.securityTerm;
      postData.siteWidth = this.detailData.siteWidth;
      postData.storageAddress = this.detailData.storageAddress;
      postData.storageCapacity = this.detailData.storageCapacity;
      postData.storageFun = this.detailData.storageFun;
      postData.storageHeight = this.detailData.storageHeight;
      postData.storageName = this.detailData.storageName;
      postData.storageTemp = this.detailData.storageTemp;
      postData.trafficSetting = this.detailData.trafficSetting;
      postData.referencePrice = this.detailData.referencePrice;

      let tempFiles = this.detailData.fileVos;
      let tempFilesArr = [];
      if (tempFiles) {
        for (var i = 0; i < tempFiles.length; i++) {
          let FileVo = {};
          FileVo.name = tempFiles[i].name;
          FileVo.url = tempFiles[i].url;
          tempFilesArr.push(FileVo);
        }
      }
      postData.files = tempFilesArr;
      return postData;
    }
  }
};
</script>
<style>
  .page-baseinfo-edit .edit-box{
    height: 100%;
    border:1px solid #e3e4e6;
    background:#fff;
    padding-bottom:30px;
  }
  .page-baseinfo-edit .edit-box .edit-row .el-form-item{
    display: inline-block;
    width: 45.7%;
  }
  .page-baseinfo-edit .edit-box .edit-row .el-form-item:nth-child(even){
    margin-left:72px!important;
  }
  .page-baseinfo-edit .edit-box .title{
    font-size:16px!important;
    line-height:40px;
    margin-left:6px;
    margin-top:10px;
    color:#333;
  }
  .page-baseinfo-edit .edit-box .el-form-item__label{
    padding-bottom:0;
    font-size:14px;
  }
  .page-baseinfo-edit .edit-box .edit-item{
    border-bottom:1px dashed #e6e6e6;
    margin-left:20px;
    margin-right:20px;
  }
  .page-baseinfo-edit .edit-box .v-modal{
    z-index:-1!important;
  }
  .page-baseinfo-edit .edit-box .el-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
  }
  .page-baseinfo-edit .edit-box .el-upload.el-upload--picture {
    position: absolute;
    top: -34px;
    left: 76px;
    color: #fff;
    border-radius: 4px;
    padding: 0 12px;
  }
  .page-baseinfo-edit .edit-box .el-upload__tip {
    font-size: 12px;
    color: #606266;
    margin-top: 7px;
    margin-bottom: -10px;
    position: absolute;
    top: -40px;
    left: 177px;
  }

  .page-baseinfo-edit .edit-box .el-upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .page-baseinfo-edit .edit-box .el-upload-list--picture .el-upload-list__item {
    overflow: hidden;
    z-index: 0;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0;
    padding: 4px;
    height: 40px;
    margin-bottom: 10px;
  }
  .page-baseinfo-edit .edit-box .el-upload-list--picture .el-upload-list__item-thumbnail {
    vertical-align: middle;
    display: inline-block;
    width: 30px;
    height: 30px;
    float: left;
    position: relative;
    z-index: 1;
    margin-left: 0;
  }
  .page-baseinfo-edit .edit-box .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
    line-height: 32px;
    margin-top: 0;
  }
  .page-baseinfo-edit .edit-box  .el-form-item__content .upload-demo{
    margin-top:15px;
  }
  .page-baseinfo-edit .edit-box .edit-item .edit-row .el-select.el-select--small{
    width:100%;
  }
  .page-baseinfo-edit .edit-box  .edit-row.right-con .el-form-item{
    position:relative;
  }
  .page-baseinfo-edit .edit-box  .edit-row.right-con .temp:before{
    content:'℃';
    position: absolute;
    top: 42px;
    right: 10px;
    z-index: 99;
  }
  .page-baseinfo-edit .edit-box  .edit-row.right-con .storage:before{
    content:'万吨';
    position: absolute;
    top: 42px;
    right: 10px;
    z-index: 99;
  }
  .page-baseinfo-edit .edit-box  .edit-row.right-con .conArea:before{
    content:'㎡';
    position: absolute;
    top: 42px;
    right: 10px;
    z-index: 99;
    font-size:14px;
  }
  .page-baseinfo-edit .edit-box  .edit-row.right-con .charge:before{
    content:'台';
    position: absolute;
    top: 42px;
    right: 10px;
    z-index: 99;
    font-size:14px;
  }
  .page-baseinfo-edit .edit-box-btn{
    width:100%;
    text-align: center;
    margin-top:40px;
    margin-bottom:40px;
  }
  .page-baseinfo-edit .edit-box-btn>span{
    min-width: 142px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    margin: 0 5px;
    background-color: #1383f2;
    border-radius: 2px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 10;
  }
  .page-baseinfo-edit .edit-box .el-input--small .el-input__inner{
    font-size:14px;
    color:#000;
  }
  .page-baseinfo-edit .edit-box .edit-upload{
    margin-top:5px;
  }
  .page-baseinfo-edit .imgpreview-box{
    background:rgba(0,0,0,0.8);
    position:fixed;
    width:1000px;
    height:100%;
    top:0;
    right:0;
    z-index:99;
  }
  .page-baseinfo-edit .imgpreview-box .close{
    height:50px;
    background:#fff;
    width:100%;
    line-height:50px;
    color:#000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right:20px;
    text-align:right;
    margin-bottom:20px;
    cursor: pointer;
  }
  .page-baseinfo-edit .imgpreview-box img{
    width:80%;
    margin: 15vh 10%;
  }
</style>
